<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus'; // 引入 Element Plus 的弹窗组件

const router = useRouter();

// 表单数据
const form = ref({
  userId: '', // 手机号码
  password: '', // 密码
  userName: '', // 用户名称
  userSex: 1, // 性别，1 代表男，2 代表女
  userImg: 'default_image_url', // 用户头像，默认值
  delTag: 1, // 删除标记，默认值为 1
});

const confirmPassword = ref(''); // 确认密码
const errorMsg = ref(''); // 错误信息

// 注册函数
function register() {
  // 验证两次输入的密码是否一致
  if (form.value.password !== confirmPassword.value) {
    errorMsg.value = '两次输入的密码不一致';
    return;
  }

  // 发送 POST 请求到后端
  axios.post('/UserController/saveUser', form.value, {
    withCredentials: true, // 允许携带凭证
    headers: {
      'Content-Type': 'application/json', // 设置请求头
    },
  })
      .then(response => {
        if (response.data && response.data.code === 200) {
          // 注册成功，弹出成功提示
          ElMessage.success('注册成功！');
          // 跳转到登录页面
          router.push('/login');
        } else {
          // 注册失败，弹出错误提示
          ElMessage.error(response.data?.message || '注册失败，请稍后重试');
        }
      })
      .catch(error => {
        if (error.response) {
          // 服务器返回了错误响应
          ElMessage.error(error.response.data?.message || '注册失败，请检查输入');
        } else if (error.request) {
          // 请求已发出，但没有收到响应
          ElMessage.error('网络错误，请检查连接');
        } else {
          // 其他错误
          ElMessage.error('注册失败，请稍后重试');
        }
        console.error(error);
      });
}
</script>

<template>
  <div class="h-full bg-sky-9 flex items-center justify-center">
    <div class="w-25em bg-white rounded p-8 shadow-2xl">
      <div class="text-center text-2xl font-bold">Register</div>
      <div class="pt-4">
        <form @submit.prevent="register">
          <!-- 手机号码 -->
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="userId">
              手机号码
            </label>
            <input v-model="form.userId" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="userId" type="text" placeholder="手机号码">
          </div>

          <!-- 密码 -->
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
              密码
            </label>
            <input v-model="form.password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="密码">
          </div>

          <!-- 确认密码 -->
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="confirmPassword">
              确认密码
            </label>
            <input v-model="confirmPassword" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="confirmPassword" type="password" placeholder="确认密码">
          </div>

          <!-- 用户名称 -->
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="userName">
              用户名称
            </label>
            <input v-model="form.userName" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="userName" type="text" placeholder="用户名称">
          </div>

          <!-- 性别 -->
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="userSex">
              性别
            </label>
            <div class="flex items-center">
              <input v-model="form.userSex" type="radio" value="1" id="male" class="mr-2">
              <label for="male" class="mr-4">男</label>
              <input v-model="form.userSex" type="radio" value="2" id="female" class="mr-2">
              <label for="female">女</label>
            </div>
          </div>

          <!-- 错误信息 -->
          <div v-if="errorMsg" class="text-red-500 mb-4">{{ errorMsg }}</div>

          <!-- 注册和返回登录按钮 -->
          <div class="flex items-center justify-between">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
              注册
            </button>
            <button @click="router.push('/login')" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
              返回登录
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>